import React, { Component } from 'react'
import { Modal, Button, Select, Form, Input, } from 'antd';
import axios from 'axios'
const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
export default class componentName extends Component {
  state = {
    visible: false,
    formList: [],
    nameArr: []
  };

  componentDidMount() {
    this.getUsersAll()
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  // 弹出框的确定事件
  handleOk = e => {
    // 点击弹出框的确定按钮的时候，获取到表单的内容
    this.refs.myForm.submit()
  };

  handleCancel = e => {
    console.log(e);
    // this.setState({
    //   visible: false,
    // });
  };

  // form表单事件
  onFinish = values => {
    console.log('Success:', values);
    // 获取到表单数据后，关闭弹出框
    this.props.closeModal(values)
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  // 下拉选中函数
  handleChange = (value) => {
    console.log(`selected ${value}`);
    console.log(this.state.formList, 'formlist')
    this.setState({
      nameArr: this.state.formList.filter(v => v.stuid == value)
    }, () => {
      console.log(this.state.nameArr, 'namear')
    })
  }

  // 请求users表下的所有的数据
  async getUsersAll() {
    let data = await axios.get('/api/findUsers')
    let list = data.data.data
    console.log(list, 'list')
    this.setState({
      formList: list
    })

    // this.setState({
    //   stuidArr: data.data.data.filter(v => v.stuid)
    // }, () => {
    //   console.log(this.state.stuidArr, 'stuidArr')
    // })

  }



  render() {
    const { isEdit, } = this.props;
    const { formList, nameArr } = this.state;
    return (
      <>
        <Modal
          // ref="myModal"
          title="Basic Modal"
          visible={this.props.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form
            ref="myForm"
            {...layout}
            name="basic"
            initialValues={{ remember: true, }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >

            {
              isEdit === 'add' ? (<>
                <Form.Item
                  label="学号"
                  name="stuid">
                  <Select style={{ width: 220 }} onChange={(val) => this.handleChange(val)}>
                    {
                      formList.map((item, index) => {
                        return <Option key={index} value={item.stuid}>{item.stuid}</Option>
                      })
                    }
                  </Select>
                </Form.Item>
              </>) : null
            }

            <Form.Item
              label="姓名"
              name="username"
            >
              {isEdit === 'add' ? <span>{nameArr.length && nameArr[0].username}</span> : <Input disabled />}
            </Form.Item>

            <Form.Item
              label="理论成绩"
              name="theory"
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="技能成绩"
              name="skill"
            >
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </>
    )
  }
}
